import './son.scss'
const Son = (props) => {
    const display = (event, index) => {
        //获取父类的li(没什么用给注释掉了)
        // const li = event.target 
        //获取div
        const div = document.querySelectorAll('li>div')
        //设置隐藏与否
        const dis = div[index].style.display
        //判断当前状态
        if (dis !== 'block') {
            div[index].style.display = 'block'
        }else {
            div[index].style.display = 'none'
        }
    }
    return <div>
        <ul>
            {
                props.data.map((item, index, arr) => {
                    return <li key={index} className='ul_li' onClick={(event) => display(event, index)}>
                        {
                            item.name
                        }
                        {
                            item.children && <Son data={item.children}>
                                {item.children}
                            </Son>
                        }
                    </li>
                })
            }
        </ul>
    </div>
}
export default Son
